<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>盒子模型</title>
	</head>
	<body>
		<p>内部盒子居中效果1</p>
		<ul>
			<li>父元素 display：table-cell; vertical-align: middle</li>
			<li>子元素 margin: auto; </li>
		</ul>
		<div style="display: table-cell; vertical-align: middle; width: 100px; height: 100px; background: #0000FF; border: dashed 1px #888;">
			<div style=" margin: auto; width: 20px; height: 20px; background: gold;"></div>
			
		</div>
		
		
		<p>内部盒子居中效果2</p>
		<ul>
			<li>父元素 position: relative</li>
			<li>子元素 margin:auto; position: absolute; left:0; top:0; bottom:0; right:0;</li>
		</ul>
		<div style="position:relative; width: 100px; height: 100px; background: #0000FF; border: dashed 1px #888;">
			<div style="margin:auto; position: absolute; left: 0; top: 0; bottom: 0; right: 0; width: 20px; height: 20px; background: gold;"></div>
			
		</div>
		
		
		<p>内部盒子居中效果3</p>
		<ul>
			<li>父元素 position: relative</li>
			<li>子元素 position: absolute; left:50%; top:50%; margin-left: -10px 0 0 -10px;</li>
		</ul>
		<div style="position:relative; width: 100px; height: 100px; background: #0000FF; border: dashed 1px #888;">
			<div style="position: absolute; left:50%; top:50%; margin: -10px 0 0 -10px; width: 20px; height: 20px; background: gold;"></div>
			
		</div>
		
		<p>内部盒子居中效果4</p>
		<ul>
			<li>父元素 display: flex; justify-content: center; align-items: center;</li>
		</ul>
		<div style="display: flex; justify-content: center; align-items: center; width: 100px; height: 100px; background: #0000FF; border: dashed 1px #888;">
			<div style="width: 20px; height: 20px; background: gold;"></div>
			
		</div>
		
		<p>内部盒子居中效果5 <b>(仅垂直居中)</b></p>
		<ul>
			<li>父元素 line-height: 100px;</li>
			<li>子元素 display: inline-block;</li>
		</ul>
		<div style="line-height: 100px; width: 100px; height: 100px; background: #0000FF; border: dashed 1px #888;">
			<div style="display: inline-block; width: 20px; height: 20px; background: gold;"></div>
		</div>
		
		<p>内部盒子居中效果6 <b>(仅水平居中)</b></p>
		<ul>
			<li>子元素 margin: auto; </li>
		</ul>
		<div style="width: 100px; height: 100px; background: #0000FF; border: dashed 1px #888;">
			<div style="margin: auto; width: 20px; height: 20px; background: gold;"></div>
		</div>
	</body>
</html>